<template>
  <div @click="addDialogVisible = true" class="center cursor-pointer">
    <el-icon><CirclePlus /></el-icon>新增章节
  </div>
  <ul class="infinite-list" style="overflow: auto">
    <li
      v-for="(item, i) in list"
      :key="item.chapterId"
      class="infinite-list-item px-6 cursor-pointer"
      @click="openDetail(item)"
    >
      <div>{{ `第${i + 1}章` }}</div>
      <div>
        {{ item.chapterName }}
        <el-popconfirm @confirm.stop="deleteChapter(item)" title="确定删除？">
          <template #reference>
            <el-icon @click.stop="" color="red"><Delete /></el-icon>
          </template>
        </el-popconfirm>
      </div>
    </li>
  </ul>
  <el-dialog
    v-model="comicDialogVisible"
    style="height: 550px"
    title="预览"
    width="25%"
  >
    <div class="flex justify-between">
      <el-upload
        :auto-upload="false"
        :show-file-list="false"
        @change="fileOnChange"
      >
        <el-button type=" danger" circle :icon="Plus"></el-button>
      </el-upload>
      <el-popconfirm @confirm.stop="deleteImg" title="确定删除单选框图片？">
        <template #reference>
          <el-button type="danger" circle :icon="Delete"></el-button>
        </template>
      </el-popconfirm>
    </div>
    <div style="height: 400px" class="overflow-y-auto mt-2">
      <el-radio-group v-model="radio">
        <div v-for="item in listImg" :key="item.pageId" class="flex">
          <el-radio :label="item.pageNumber">{{}}</el-radio>
          <img class="w-4/5" :src="'/api' + item.pageStorage" />
        </div>
      </el-radio-group>
      <el-empty v-if="listImg.length == 0" description="暂时为空" />
    </div>

    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="comicDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="comicDialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template> -->
  </el-dialog>
  <el-dialog v-model="addDialogVisible" title="新增章节" width="50%">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      size="default"
      status-icon
    >
      <el-form-item label="章节数" prop="chapterNumber">
        <el-input-number v-model="form.chapterNumber" :min="1" />
      </el-form-item>
      <el-form-item label="章节名" prop="chapterName">
        <el-input v-model="form.chapterName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addForm(formRef)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";
import request from "@/api/http";
import { Delete, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const props = defineProps(["selectRow"]);
const count = ref(0);
const list = ref([]);
const listImg = ref([]);
const item = ref({});
const radio = ref(0);
const form = ref({
  chapterNumber: "",
  chapterName: "",
  comicName: props.selectRow.name,
});
const formRef = ref(null);
const rules = ref({
  chapterName: [
    {
      required: true,
      message: "请输入章节名",
      trigger: "blur",
    },
  ],
  chapterNumber: [
    {
      required: true,
      message: "请输入章节数",
      trigger: "blur",
    },
  ],
});
const comicDialogVisible = ref(false);
const addDialogVisible = ref(false);
const addForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log(form.value);
      request({
        url: "chapter/addChapter",
        method: "post",
        data: form.value,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage.success("添加成功！");
          addDialogVisible.value = false;
          resetForm(formEl);
          getList();
        } else if (res.code == 401) {
          ElMessage.info("章节已经存在！");
        } else {
          ElMessage.error("添加失败");
        }
      });
    }
  });
};
const openDetail = (data) => {
  item.value = data;
  comicDialogVisible.value = true;
  getComicImg();
};
const fileOnChange = (data) => {
  let FormFile = new FormData();
  FormFile.append("coverFile", data.raw);
  let copyForm = {
    comicName: props.selectRow.name,
    chapterNumber: item.value.chapterNumber,
  };
  FormFile.append(
    "comicPage",
    new Blob([JSON.stringify(copyForm)], { type: "application/json" })
  );
  request({
    url: "comicPage/addComicPage",
    method: "post",
    isFile: true,
    data: FormFile,
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("添加成功！");
      getComicImg();
    } else {
      ElMessage.error("添加失败");
    }
  });
};
const getComicImg = () => {
  request({
    url: "comicPage/getAllPage",
    method: "post",
    data: {
      pageNum: 1,
      pageSize: 100,
      data: {
        comicName: props.selectRow.name,
        chapterNumber: item.value.chapterNumber,
      },
    },
  }).then((res) => {
    if (res.code == 200) {
      listImg.value = res.data;
    } else {
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
const getList = () => {
  request({
    url: "chapter/selectChapter",
    method: "post",
    data: {
      pageNum: 1,
      pageSize: 100,
      data: {
        comicName: props.selectRow.name,
        // "chapterNumber":1
      },
    },
  }).then((res) => {
    if (res.code == 200) {
      list.value = res.data;
    } else {
    }
  });
};
const deleteChapter = (row) => {
  request({
    url: "chapter/deleteChapter",
    method: "post",
    data: {
      comicName: props.selectRow.name,
      chapterNumber: row.chapterNumber,
    },
  }).then((res) => {
    if (res.code == 200) {
      getList();
      ElMessage.success("删除成功");
    } else {
      ElMessage.error("删除失败");
    }
  });
};
const deleteImg = () => {
  if (radio.value == 0) {
    return ElMessage.info("不能选择为空！");
  }
  request({
    url: "comicPage/deleteComicPage",
    method: "post",
    data: {
      comicName: props.selectRow.name,
      chapterNumber: item.value.chapterNumber,
      pageNumber: radio.value,
    },
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("删除成功！");
      getComicImg();
    } else {
    }
  });
};
onMounted(() => {
  console.log(props.selectRow);
  console.log(getList());
});
</script>
<style scoped>
/* .dialog-footer button:first-child {
  margin-right: 10px;
} */
</style>
<style>
.infinite-list {
  height: 550px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
